<template>
  <div style="position:relative;">
    <div class="button-box" v-drag draggable="false">

      <el-dropdown :trigger="'click'" class="">
        <div>
          <div class="tip" style="">
            <span ref="importProgress">导入进度</span>
            <i @click="$store.state.uploadGoodsShow = false" style="font-size: 17px" class="el-icon-error" />
          </div>
        </div>
        <el-dropdown-menu slot="dropdown">
          <div style="padding-bottom: 10px;padding-left: 10px">
            <span style="color: grey;font-weight: bold">状态：</span>
            <span style="color: #333333;font-weight: bold;">{{status_name&&status_name!=='导入失败'?status_name:''}}</span>
          </div>
          <div class="upload-process-container">
            <div class="head-container">
              <div class="head-left">
                <span>导入进度</span>
                <span>（{{progress.now?progress.now:0}}/{{progress.total?progress.total:0}}）</span>
              </div>
            </div>
            <div class="message-list">
              <div class="message-item">
                <el-progress style="margin-top: 10px" :text-inside="true" :stroke-width="26"
                             :percentage="progress.total?parseInt(progress.now/progress.total*100):0"></el-progress>
              </div>
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: ''
    },
    data () {
      return {
        text: '',
        isOpen: false,
        isMove: false,
        clientWidth: '',
        clientHeight: '',
        progress: '',
        interval: '',
        status_name: '',
      }
    },
    destroyed() {
      clearInterval(this.interval)
    },
    mounted() {
      this.interval = setInterval(this.getImportStatus,1000);
      /*this.simulationClick()*/
      /*this.$store.state.uploadGoodsInterval = interval*/
    },
    watch: {
      /*isShow(val){
        clearInterval(this.interval)
        this.simulationClick()
      }*/
    },
    methods: {
      mousedowm (e) { // 鼠标按下时的鼠标所在的X，Y坐标
        this.mouseDownX = e.pageX
        this.mouseDownY = e.pageY
        // 初始位置的X，Y 坐标
        // this.initX = obj.offsetLeft;
        // this.initY = obj.offsetTop;
        console.log('e', e)
        // 表示鼠标已按下
        this.flag = true
      },
      mousemove (e) {
        if (this.flag) {
          console.log('e :', e)
        }
      },

      async getImportStatus() {
        let excel_check_id = this.$store.state.excel_check_id
        await this.$api.getImportStatus({excel_check_id: excel_check_id}).then(res=>{
          if(res.data.level=='success'){
            let data = res.data.data
            this.progress = data.progress
            this.status_name = data.status_name
            if(data.is_success==1 || data.status_name==='等待处理'){
              clearInterval(this.interval)
            }
          }
        }).catch(err => {

        }).finally(msg => {

        });
      },

      simulationClick() {
        this.$refs.importProgress.click()
      }

    },
    created() {
      // 屏幕宽度
      this.clientWidth = document.documentElement.clientWidth
      // 屏幕高度
      this.clientHeight = document.documentElement.clientHeight

    },
    computed: {
      // 安全距离
      safeArea() {
        return this.padding.split(' ')
      }
    },
    directives: {
      drag (el) {
        let oDiv = el // 当前元素
        // let self = this // 上下文
        // 禁止选择网页上的文字
        document.onselectstart = function () {
          return false
        }
        oDiv.onmousedown = function (e) {
          // 鼠标按下，计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft
          let disY = e.clientY - oDiv.offsetTop
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            let l = e.clientX - disX
            let t = e.clientY - disY
            // 移动当前元素
            oDiv.style.left = l + 'px'
            oDiv.style.top = t + 'px'
          }
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null

            let disX = e.clientX - oDiv.offsetLeft
            let disY = e.clientY - oDiv.offsetTop
            // 通过事件委托，计算移动的距离
            let l = e.clientX - disX
            let t = e.clientY - disY
            // 移动当前元素
            oDiv.style.left = ''
            oDiv.style.right = 0 + 'px'
            oDiv.style.top = t + 'px'

            // 获取宽度
            let itemWidth = oDiv.offsetWidth
            let itemHeight = oDiv.offsetHeight

            if (oDiv.style.left > this.clientWidth / 2) {
              oDiv.style.left = this.clientWidth - itemWidth
            } else {
              /*oDiv.style.left = this.safeArea[3]*/
            }

          }
          // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
          return false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button-box {
    width: 80px;
    border-radius: 50%;
    position: fixed;
    top: 80px;
    right: 0px;
    padding-left: 15px;
    padding-top: 8px;
    cursor: pointer;
    opacity: 0.7;
    z-index: 888;
  }
  .btn-bg-img {
    width: 80px;
    height: 80px;
    background-color: red;
    background-size: cover;
  }
  .button-box:hover {
    color: white;
    opacity: 1;
  }

  .font-box {
    width: 80px;
    color: #3193ef;
    text-align: center;
  }

  .upload-process-container{
    /*position: fixed;
    right: 20px;
    top: 100px;*/
    /* background-color: #ffffff;*/
    width: 400px;
    /*min-height: 300px;*/
    /*transform-origin: center bottom;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #EBEEF5;*/
    .head-container{
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #EDEDED;
      .head-left{
        font-size: 15px;
        font-weight: bold;
      }
      .head-right{
        font-size: 18px;
        cursor: pointer;
        color: red;
      }
    }
    .message-list{
      .message-item{
        padding: 10px 5px;
        font-size: 14px;
        color: #333333;
        line-height: 20px;
      }
    }
  }

  .tip{
    padding: 0 10px;
    height: 40px;
    font-size: 11px;
    background-color: #00a0e9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 15px 0 0 15px;
  }

</style>
